Taiwan travel-issue and solution(Part3)

<div dangerouslySetInnerHTML={{ __html: data.OpenTime }}></div>

<div className={wrap_time_or_phone}>
  <img src={clock} alt="clock" />
  {(() => {
    const createTempleteDiv = document.createElement("div");
    createTempleteDiv.innerHTML = OpenTime;
    return createTempleteDiv.textContent;
  })()}
</div>

{
 "total": 50,
 "per_page": 15,
 "current_page": 1,
 "last_page": 4,
}

let totalPage = (Math.ceil(itemAmount / 12));
function makePaginationButtonValue(
    { 
      totalPage,
      currentPage,
      perPageButtonAmount = 5
    }
) {
    //算總頁數
    //算出所有的頁數的陣列
    const totalPageNumberArray = Array.from({
        length: totalPage
    }, (_, index) => (
        index + 1
    ))
    //算出頁數陣列開始的位置
    let beginSliceNumber = (Math.ceil(currentPage / perPageButtonAmount) - 1) * perPageButtonAmount;
    //算出頁數陣列結束的位置
    let endSliceNumber = (Math.ceil(currentPage / perPageButtonAmount)) * perPageButtonAmount;
    // 算出當前的頁數陣列的數字
    return totalPageNumberArray.slice(beginSliceNumber, endSliceNumber);
  }
const paginationButtonValueArray = makePaginationButtonValue({ totalPage, itemAmount, currentPage })

{
  paginationButtonValueArray.map(
  (element, index) => (
    <button
        className={`${currentPage === element ? current_page_button : common_page_button}`}
        value={element}
        key={index}
        onClick={(e) => clickPageButtonHandler(e, "page")}
    >
        {element}
    </button>)
  )
}

import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web
 
import rootReducer from './reducers'

// navigation will not be persisted
const persistConfig = {
  key: "root",
  storage,
  blacklist: ["token"],
};

const reducers = combineReducers({
  token: tokenReducer,
  selectResult: selectResultReducers,
});
const persistedReducer = persistReducer(persistConfig, reducers);

export const getToken = createAsyncThunk("token/getToken", async () => {
  try {
    return await axios(config);
  } catch (error) {
    console.log(error);
  }
});
export const tokenSlice = createSlice({
  name: "token",
  initialState,
  extraReducers: {
    [getToken.pending]: (state, action) => {
      state.status = "loading";
    },
    [getToken.fulfilled]: (state, { payload }) => {
      state.tokenData = payload;
      state.status = "success";
    },
    [getToken.rejected]: (state, action) => {
      state.status = "failed";
    },
  },
});
export default tokenSlice.reducer;

 [
   {
    title: "history",
    chineseName: "歷史文化",
    image: history,
    visitType: "ScenicSpot",
    queryObject: {
      $select: "Class1,ScenicSpotName,Picture,OpenTime,Address,ScenicSpotID",
      $filter: `(Class3 eq '古蹟類' or Class2 eq '古蹟類'or Class1 eq '古蹟類' or Class3 eq '文化類' or Class2 eq '文化類'or Class1 eq '文化類' or Class3 eq '藝術類' or Class2 eq '藝術類'or Class1 eq '藝術類') and Picture/PictureUrl1 ne null and Address ne null and Description ne null and OpenTime ne null`,
    },
  },
    //以下省略
   ...
]

{
  "hot":2343254,
  "star":5
}

{allCityArray.map((city, index) => {
  return (
    <button key={index} value={city.urlPathName}
    className={
      city.urlPathName === queryState.urlPathName ? select_city : null
    }
    onClick={
      () => {
        qDispatch(selectCity(city))
        distnationFunction(false)
      }
    } >
      {city.chineseName}
    </button>)
})}

navigate(`/search/${url}`, {
  state: {
      themeName: themeItem.title
  }, replace: true
});

const location = useLocation();
//為了避免有些不是從精選主題跳轉過來造成的重新渲染，因此使用？.來取 themeName
const themeName = location?.state?.themeName;

queryActionCreator.js
queryActionType.js
queryInitState.js
queryReducer.js

import { SEARCH_INPUT, SELECT_CITY } from "./queryActionType";
function selectCity(city) {
  return {
    type: SELECT_CITY,
    payload: city,
  };
}
function searchInput(inputValue) {
  return {
    type: SEARCH_INPUT,
    payload: inputValue,
  };
}
export { selectCity, searchInput };

export const SELECT_CITY = "selectCity";
export const SEARCH_INPUT = "searchInput";

const queryInitState = {
  chineseName: "目的地",
  urlPathName: "all",
  title: "",
  image: null,
  visitType: "ScenicSpot",
  queryObject: {
    $select: "ScenicSpotName,Picture,OpenTime,Address,ScenicSpotId",
    $filter: `Picture/PictureUrl1 ne null and Address ne null`,
  },
};
export default queryInitState;

import { SELECT_CITY, SEARCH_INPUT } from "./queryActionType";
function queryReducer(state, action) {
  switch (action.type) {
    case SELECT_CITY:
      return {
        ...state,
        chineseName: action.payload.chineseName,
        urlPathName: action.payload.urlPathName,
      };
    case SEARCH_INPUT:
      return {
        ...state,
        queryObject: {
          $select: "ScenicSpotName,Picture,OpenTime,Address,ScenicSpotId",
          $filter: `Picture/PictureUrl1 ne null and Address ne null and contains(${
            state.visitType
          }Name,'${action.payload.trim()}')`,
        },
      };
    default:
      return state;
  }
}
export default queryReducer;

const [queryState, qDispatch] = useReducer(queryReducer, queryInitState);